import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import { routerList } from '../../utils/routerList';
import mobxdata from '../../mobx/data'
import { observer } from 'mobx-react';
import { hashHistory } from '../../utils';
import { withRouter } from 'react-router';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu
@withRouter
@observer
class MyMenu extends Component {

    toggle = () => {
        mobxdata.changeCollapsed()
    };
    itemClick = ({ item, key }) => {
        console.log(key);
        hashHistory.push(key)
    }
    renderItem = (routerList) => {
        const { userinfo } = mobxdata
        if (!userinfo) return false
        return (
            routerList.map((item, i) => {
                if (item.children) {
                    if (userinfo.role < item.premisssion) {
                        return null
                    } else {
                        return (
                            <SubMenu icon={item.icon} title={item.title} key={item.path}>
                                {this.renderItem(item.children)}
                            </SubMenu>
                        )
                    }
                } else {
                    if (userinfo.role < item.premisssion) {
                        return null
                    } else {
                        return (
                            <Menu.Item key={item.path} icon={item.icon}>{item.title}</Menu.Item>
                        )
                    }
                }
            })
        )
    }
    render() {
        const { collapsed } = mobxdata
        const pathname = this.props.location.pathname
        let path = pathname.split('/')
        path = "/" + path[1] + "/" + path[2]
        console.log(pathname);
        return (
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                style={{
                    width: 200, height: '100vh', backgroundColor: '#123456'
                }}
            >
                <div
                    className="logo"
                    style={{
                        width: '100%', padding: 10, marginTop: 10, boxSizing: 'border-box'
                    }}>
                    <img
                        style={{
                            height: '40px', width: '100%'
                        }}
                        src='http://img01.yun300.cn/repository/image/MVxn63bLTeClPOQLpF45UA.png?k=1560392951000&tenantId=74111&viewType=1&k=1606877716000
'
                        alt=""
                    />
                </div>
                <Menu
                    theme='dark'
                    mode="inline"
                    onClick={this.itemClick}
                    defaultOpenKeys={[path]}
                    defaultSelectedKeys={[pathname]}
                >
                    {this.renderItem(routerList)}
                </Menu>
            </Sider >
        )
    }
}


export default MyMenu